'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Progress } from '@/components/ui/progress'
import { Target, TrendingUp, TrendingDown, AlertCircle } from 'lucide-react'

interface StrategyPanelProps {
  symbol: string
  timeframe: string
  data: any
}

export function StrategyPanel({ symbol, timeframe, data }: StrategyPanelProps) {
  const [isExpanded, setIsExpanded] = useState(false)

  // Mock strategy data
  const strategy = {
    signal: 'BUY',
    confidence: 78,
    entryPrice: 46800,
    stopLoss: 45200,
    takeProfit: 48500,
    positionSize: '2.5%',
    riskReward: 1.5,
    reasoning: [
      'Strong bullish momentum on 4H timeframe',
      'RSI showing oversold bounce from 35',
      'Volume spike confirms institutional interest',
      'Breaking above key resistance level'
    ]
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Trading Strategy</span>
          <Badge 
            variant={strategy.signal === 'BUY' ? 'default' : 'destructive'}
            className={strategy.signal === 'BUY' ? 'bg-green-600' : 'bg-red-600'}
          >
            {strategy.signal}
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <div className="flex justify-between text-sm mb-2">
            <span>Confidence Level</span>
            <span>{strategy.confidence}%</span>
          </div>
          <Progress value={strategy.confidence} className="h-2" />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <div className="flex items-center space-x-2 text-sm">
              <Target className="h-4 w-4 text-muted-foreground" />
              <span>Entry Price</span>
            </div>
            <p className="font-semibold">${strategy.entryPrice.toLocaleString()}</p>
          </div>

          <div className="space-y-2">
            <div className="flex items-center space-x-2 text-sm">
              <TrendingDown className="h-4 w-4 text-red-500" />
              <span>Stop Loss</span>
            </div>
            <p className="font-semibold text-red-500">${strategy.stopLoss.toLocaleString()}</p>
          </div>

          <div className="space-y-2">
            <div className="flex items-center space-x-2 text-sm">
              <TrendingUp className="h-4 w-4 text-green-500" />
              <span>Take Profit</span>
            </div>
            <p className="font-semibold text-green-500">${strategy.takeProfit.toLocaleString()}</p>
          </div>

          <div className="space-y-2">
            <div className="flex items-center space-x-2 text-sm">
              <AlertCircle className="h-4 w-4 text-blue-500" />
              <span>Position Size</span>
            </div>
            <p className="font-semibold text-blue-500">{strategy.positionSize}</p>
          </div>
        </div>

        <div className="pt-4 border-t">
          <Button 
            variant="outline" 
            className="w-full"
            onClick={() => setIsExpanded(!isExpanded)}
          >
            {isExpanded ? 'Hide' : 'Show'} Detailed Analysis
          </Button>
          
          {isExpanded && (
            <div className="mt-4 space-y-3">
              <div>
                <h4 className="font-semibold mb-2">Risk/Reward Ratio</h4>
                <p className="text-sm text-muted-foreground">1:{strategy.riskReward}</p>
              </div>
              
              <div>
                <h4 className="font-semibold mb-2">Analysis Reasoning</h4>
                <ul className="space-y-1">
                  {strategy.reasoning.map((reason, index) => (
                    <li key={index} className="text-sm text-muted-foreground">
                      • {reason}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
